<!--
 * @Date: 2024-02-27 14:39:47
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-28 09:20:28
 * @FilePath: \ztc-web\src\views\overview\components\sacleBox.vue
-->

<template>
  <div ref="ScaleBox" class="ScaleBox" :style="{'width':width+'px','height':dialogWidth?'auto':height+'px'}">
    <slot />
  </div>
</template>
<script setup name="ScaleBox">
import { onMounted } from 'vue';

  const { proxy } = getCurrentInstance();
  const props = defineProps({
    width:{
      type:[Number,String],
      default:1920
    },
    height:{
      type:[Number,String],
      default:1080
    },
    boxScale:{
      type:[Number,String],
      default:''
    },
    dialogWidth:{
      type:[Number,String],
      default:''
    },
  })
const scale = ref(0)
function getScale() {
  // 固定好8：3的宽高比，计算出最合适的缩放比
  const { width, height } = props
  const wh = screen.height / Number(height)
  const ww = screen.width / Number(width)
  console.log(ww < wh ? ww : wh)
  return ww < wh ? ww : wh
}
function setScale() {
  // 获取到缩放比例，设置它
  scale.value = getScale()
  if (proxy.$refs.ScaleBox) {
    proxy.$refs.ScaleBox.style.setProperty('--scale', props.boxScale? props.boxScale: scale.value.toFixed(3))
    //  this.$refs.ScaleBox.style.setProperty('width',(this.dialogWidth?this.dialogWidth:screen.width/this.scale.toFixed(3))+'px')
  }
}
function debounce(fn, delay) {
  const delays = delay || 500
  let timer
  return function() {
    const th = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(th, args)
    }, delays)
  }
}
onMounted(() => {
  setScale()
  window.addEventListener('resize', debounce(setScale()))
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', debounce(setScale()))
})
</script>

<style lang="scss" scoped>
#ScaleBox {
  --scale: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  // transition: 0.3s;
  z-index: 999;
  background-color:#071C20;
}
</style>
